<template>
    <view class="content">
        <a-demo title="基础使用">
            <pure-search v-model="searchText" @search="handleSearch"></pure-search>
        </a-demo>

        <a-demo title="提示">
            <pure-search v-model="searchText" placeholder="请输入搜索内容" @search="handleSearch"></pure-search>
            <a-gap></a-gap>
            <pure-search v-model="searchText" :placeholder="['请输入搜索内容', '搜索一下，发现精彩']" @search="handleSearch"></pure-search>
        </a-demo>

        <a-demo title="搜索按钮">
            <pure-search v-model="searchText" placeholder="请输入搜索内容" showBtn @search="handleSearch"></pure-search>
        </a-demo>

        <a-demo title="功能按钮">
            <pure-search v-model="searchText" placeholder="请输入搜索内容" showBtn @search="handleSearch">
                <template #functions>
                    <pure-icon name="__saoma"></pure-icon>
                </template>
            </pure-search>
        </a-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";
    const searchText = ref("");
    function handleSearch(value) {
        uni.showToast({
            title: `搜索内容：${value}`,
            icon: "none",
            mask: true,
        });
    }
</script>

<style scoped></style>
